<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />

<link rel="stylesheet" type="text/css" href="<%=basePath%>/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/lib/Hui-iconfont/1.0.8/iconfont.css" />

<link rel="stylesheet" type="text/css" href="<%=basePath%>/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/static/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/css/bootstrap.css">  
<script type="text/javascript" src="<%=basePath%>/js/jquery.min.js"></script>

<!--/meta 作为公共模版分离出去-->

<link href="<%=basePath%>/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page-container">
		<ol class="breadcrumb">
	    <li><a>商家管理中心</a></li>
	    <li><a>我的商品</a></li>
	    <li class="active">添加商品</li>
	</ol>
	
	<form action="" method="post" class="form form-horizontal" id="form-good-add" >
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>产品名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="请输入商品名称" id="goodName" name="goodName">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">产品关键字：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" name="goodLabel" id="goodLabel" placeholder="多个关键字用英文逗号隔开，限10个关键字" value="" class="input-text">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>分类：</label>
			<div class="formControls col-xs-8 col-sm-9"> 
			<div class="btn-group">
			    <label for="name">一级分类</label>
			    <select class="form-control" id="oneClassList" name="oneClassList">
			      <c:forEach items="${goodsOneClass }" var="oneClass">
						<option value="${oneClass.classId }">${oneClass.className }</option>					
					</c:forEach>
			    </select>
			</div>
			<div class="btn-group">
			   <label for="name">二级分类</label>
			    <select class="form-control" id="twoClassList" name="twoClassList">
				    		
			    </select>
			</div>
		    </div>
				
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">市场价格：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" name="goodPrice" id="goodPrice" placeholder="" value="" class="input-text" style="width:90%">
				元</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">库存：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" name="goodStock" id="goodStock" placeholder="" value="" class="input-text" style="width:90%">件
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">产品摘要：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<textarea name="goodInfo" id="goodInfo" cols="" rows="" class="textarea"  placeholder="说点什么...最少输入10个字符" datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！" onKeyUp="$.Huitextarealength(this,200)"></textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
			</div>
		</div>
			<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">详细内容：</label>
			<div class="formControls col-xs-8 col-sm-9"> 
				<textarea  rows="20" cols="80" style="width: 100%" id="articleContent" name="articleContent">${postedit.articleContent}
					</textarea>
			</div>
		</div>
		
		<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">上传图片：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<table cellpadding="0" cellspacing="0" class="table">
						<tr>
							<td valign="top">
								<ol id="ol_img"></ol>
								<p id="p_err" style="color: Red;"></p>
							</td>
							<td rowspan="2" valign="top" style="width: 240px;">
								<div
									style="border: solid 1px #999; background-color: #f0f0f0; font-size: 11px; padding-left: 10px;">
									<p>
										1、图片大小不能超过<b>2M</b>
									</p>
									<p>2、支持格式：.jpg .gif .png .bmp</p>
							</td>
						</tr>
						<tr>
							<td valign="bottom">
							<iframe id="frm_img_2" name="frm_img_2"
									src="shop/goodImgUpload.jsp" frameborder="0" scrolling="no"
									style="width: 390px; height: 24px; float: left;"></iframe> 
									<input type="button" value="上传" style="float: left; _padding: 2px 2px;" 
									onclick="uploadImg2(this)" />（上传后可点击[插入]加入文章中）</td>
						</tr>
					</table>
					</div>
				</div>
		
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<button onclick="good_submit()" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe632;</i> 保存并提交</button>
				<button onClick="" class="btn btn-warning radius" type="reset">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
			</div>
		</div>
		
	</form>
</div>
<script type="text/javascript" src="<%=basePath%>/xheditor/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/xheditor/xheditor-1.2.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=basePath%>/xheditor/xheditor_lang/zh-cn.js"></script>
<script type="text/javascript">
	$(function(){
		   var plugins={
				Code:{c:'btnCode',t:'插入代码',h:1,e:function(){
					var _this=this;
					var htmlCode="<div>编程语言<select id='xheCodeType'>";
						htmlCode+="<option value='html'>HTML/XML</option>";
						htmlCode+="<option value='js'>Javascript</option>";
						htmlCode+="<option value='css'>CSS</option>";
						htmlCode+="<option value='php'>PHP</option>";
						htmlCode+="<option value='java'>Java</option>";
						htmlCode+="<option value='py'>Python</option>";
						htmlCode+="<option value='pl'>Perl</option>";
						htmlCode+="<option value='rb'>Ruby</option>";
						htmlCode+="<option value='cs'>C#</option>";
						htmlCode+="<option value='c'>C++/C</option>";
						htmlCode+="<option value='vb'>VB/ASP</option>";
						htmlCode+="<option value=''>其它</option>";
						htmlCode+="</select></div><div>";
						htmlCode+="<textarea id='xheCodeValue' wrap='soft' spellcheck='false' style='width:300px;height:100px;' />";
						htmlCode+="</div><div style='text-align:right;'><input type='button' id='xheSave' value='确定' /></div>";			
					var jCode=$(htmlCode),jType=$('#xheCodeType',jCode),jValue=$('#xheCodeValue',jCode),jSave=$('#xheSave',jCode);
					jSave.click(function(){
						_this.loadBookmark();
						_this.pasteHTML('<pre>'+_this.domEncode(jValue.val())+'</pre>&nbsp;');
						_this.hidePanel();
						return false;	
					});
					_this.saveBookmark();
					_this.showDialog(jCode);
				}},
				
			};
			$('#articleContent').xheditor({
					plugins:plugins,  //使用我们定义的插件  
					loadCSS:'<style>pre{margin-left:2em;border-left:3px solid #CCC;padding:0 1em;}</style>',
			});
		
		});
	
	//获取当前网址，如： http://localhost:8888/Tmall/index.jsp 
	var curWwwPath=window.document.location.href; 

	//获取主机地址之后的目录如：/Tmall/index.jsp 
	var pathName=window.document.location.pathname; 
	var pos=curWwwPath.indexOf(pathName); 

	//获取主机地址，如： http://localhost:8888 
	var localhostPaht=curWwwPath.substring(0,pos); 

	//获取带"/"的项目名，如：/Tmall 
	var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); 
	
	//获取xheditor插件
	
    function showErr2(msg) {
        $("#p_err").html("* " + msg);
    };
    function setPath2(url) {
    	if (url != null && url != "") {
    		var newurl = "${pageContext.request.contextPath}"+ url ;
     		var li = "<li><span>" + newurl + "</span><a href='#' onclick='javascript:insertImage2(this);return false;'>[插入]</a></li>";
     		$("#ol_img").append($(li));
    	}
    };
    function uploadImg2(e) {      
        window.frames["frm_img_2"].document.forms[0].submit();
    };
    function insertImage2(e) {
    	
        var url = e.previousSibling.innerHTML;
        var str = "<img src='" + url +"' />";
        $('#articleContent').xheditor().appendHTML(str);
    };
    
    function good_submit() {
    	   $.ajax({
               url:"add.goods",
               type:"post",  //提交方式，post或get
	 		    async:true, 	//同步或者异步方式，true表示异步，异步方式不会阻塞当前网页,但是会造成处理已经完成但是请求还没完成
                datatype:'text',
	 			data:{
	 				goodName: $("#goodName").val(),
	 				goodLabel: $("#goodLabel").val(),
	 				twoClassList: $("#twoClassList").val(),
	 				goodPrice: $("#goodPrice").val(),
	 				goodStock: $("#goodStock").val(),
	 				goodInfo: $("#goodInfo").val(),
	 				articleContent: $("#articleContent").val()
	 				},  //提交的请求参数，是键值对，用：隔开
	 			success:function(redata){ //请求成功的回调函数，参数是响应的返回值
	 				alert('商品添加成功');
	 			}, error:function(redata){ //请求成功的回调函数，参数是响应的返回值
	 			}
           });
    };
  //给下拉列表添加事件
    $("#oneClassList").change(function(){
        //post传输，固定四个参数；
        //第一个参数是url:发送请求地址
        //第二个参数data:待发送的值key/value
        //第三个参数callback:发送返回时回调函数
        //第四个参数type:返回内容格式，常用text，json,
        $.post("two.class",{oneClassId:$(this).val()},
            function(result){
            //获取第二级城市的id
            var twoClassList=$("#twoClassList");
            //清空第二级里面的城市
            twoClassList.empty();
            for(var i=0;i<result.length;i++){
            	twoClassList.append("<option value="+result[i].classId+">"+result[i].className+"</option>");
            }
        },"json");
    });
</script>

 	</body>
</html>